<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box1">我是文本节点
        <span style="text-transform: uppercase;">
           box1里的span
        </span>
    </div>

    <div class="box1">我是文本节点</div>
    <script>
        document.title="文本节点"

        /* 
            网页中，所有的文本内容都是文本节点对象（包括空白的部分）

                可以通过元素来获取其中的文本节点对象，但是通常不会这么做。
                通常情况下，我们可以直接通过元素来修改其中的文本

                修改文本的三个属性：
                    element.textContent     
                        获取或修改元素中的文本内容（在修改的字符串中有标签等时，会自动对内部标签进行转义）
                        获取的是标签中的内容，不会考虑css样式,也就是文本里怎么写就怎么返回


                    element.innerText       
                        获取或修改元素中的文本内容（在修改的字符串中有标签等时，会自动对内部标签进行转义）
                        获取的是标签中的内容，会考虑css样式
                        通过innerTex读取CSS样式，会触发网页的重排（重新计算CSS样式）

                    element.innerHTML       
                        获取或修改元素中HTML代码,可以直接修改网页中的代码，在修改文本内容时，有被xss注入的风险。

        */
       const box1=document.querySelectorAll(".box1")

       // 这么做就是为了获取文本节点对象，然后进行修改，太麻烦了
       const text=box1[0].firstChild

        //通过元素直接修改元素内的文本节点对象
        box1[0].textContent="直接通过元素修改元素内的文本节点对象"
        box1[1].innerHTML="修改文本  <span>试试修改过后的吧</span>"  


    </script>
</body>
</html>